<template>
	<view class="transaction-content">
		
		<template v-if="historylist.length>0">
		<block v-for="(item,index) in historylist" :key="index">
			<view class="transaction-bottom-li-title">
				{{item.typeStr}}/{{item.hash}}
			</view>
			<view class="transaction-bottom-list">
				<view class="transaction-bottom-list-l">
					<view>{{item.typeStr || '-'}}{{i18n.Commission_price}}</view>
					<text>{{item.price_x || '-'}}</text>
					<view>{{item.hash || '-'}}{{i18n.Commission_price}}</view>
					<text>{{item.price_y || '-'}}</text>
				</view>
				<view class="transaction-bottom-list-l">
					<view>{{i18n.Commission}}</view>
					<text>{{item.amount || 0}}</text>
					<view>{{i18n.Commission}}</view>
					<text>{{item.num || 0}}</text>
				</view>
				<view class="transaction-bottom-list-r">
					<view>{{i18n.HandlingFee}}</view>
					<text>{{item.poundage || '-'}}</text>
					<view>{{i18n.Commission_time}}</view>
					<text>{{item.time || '-'}}</text>
				</view>
			</view>
		</block>
		<view class="nodata" v-if="nomore">
			<text>{{i18n.no_more}}~</text>
		</view>
			
		</template>
		<template v-else>
			<view class="nodata">
				<image src="../../static/imgs/nodata.png" mode="widthFix" lazy-load></image>
				<text>{{i18n.nodata}}</text>
			</view>
		</template>
		
		
	</view>
</template>

<script>
	import {fetch, showToast, pageto, forceUpdate, check_login} from '@/common/js/util.js'
	import {mapGetters, mapMutations} from 'vuex' 
	export default {
		data() {
			return {
				page:1,
				historylist:[],
				nomore:false
			}
		},
		onReachBottom(){
			this.getHistory();
		},
		onShow(){
			uni.setNavigationBarTitle({
				title:this.getLang==1?'委托记录':'Commission record'
			})
			this.nomore = false;
			this.page=1;
			this.historylist=[]
			this.getHistory();
		},
		computed:  {
			i18n() {
				return this.$t('message');
			},
			...mapGetters([
				'getRequestUrl',
				"getLoginInfo",
				'getTextArr',
				'getLangType',
				'getLang',
				'getTransactionCur'
			])
		},
		methods:{
			getHistory(){
				// console.log(this.page)
				let _data ={
					id: this.getLoginInfo.id,
					token: this.getLoginInfo.token,
					type: 3,
					page: this.page,
					rows: 15
				}
				fetch(this.getRequestUrl+'/api/User/detailed', _data, 'post')
					.then(res=>{
						if(res.data.code==1){
							let list = res.data.data.data.data
							if(list.length==0)return;
							if(list.length<15){
								this.nomore = true;
							}
							if(this.page==1){
								this.historylist = list;
							}else{
								this.historylist = this.historylist.concat(list)
							}
							
							this.page++
							console.log(this.historylist);
						}
					})
					.catch(err=>{
						
					})
			
			},
		}
	}
</script>
<style lang="scss" scoped>
	.transaction-content{
		padding: 0 30rpx;
	}
	.transaction-bottom-li-title{
		font-size: 30rpx;
		line-height: 70rpx;
		font-weight: bold;
		// border-bottom: 1rpx solid #A5ACC4;
	}
	.transaction-bottom-list{
		padding: 20rpx 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		// border-bottom: 1rpx solid #A5ACC4;
		&:last-of-type{
			border-bottom: none;
		}
		.transaction-bottom-list-l{
			view{
				font-size: 28rpx;
				color: #666666;
			}
			text{
				font-size: 26rpx;
				color: #CDCDCD;
			}
		}
		.transaction-bottom-list-r{
			text-align: right;
			view{
				font-size: 28rpx;
				color: #666666;
			}
			text{
				font-size: 26rpx;
				color: #CDCDCD;
			}
		}
	}
	.nodata{
		text-align: center; 
		padding-top: 20rpx;
		image{
			width: 134rpx;
			height: 161rpx;
			flex-shrink: 0;
		}
		text{
			display: block;
			font-size: 24rpx;
			color: #BED0DC;
		}
	}
</style>
